<template>
  <div class="map3D" ref="Map3D">
    <div ref="map3DMain" class="map3DMain"></div>
  </div>
</template>

<script>
import {onMounted, ref} from 'vue';
import * as THREE from 'three';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
import {GUI} from "three/addons/libs/lil-gui.module.min.js";
import {DRACOLoader} from "three/examples/jsm/loaders/DRACOLoader.js";
import {GLTFLoader}  from "three/examples/jsm/loaders/GLTFLoader.js";
import {link} from "@/config/config.js";

export default {
  name: 'map3D',
  setup() {
    const map3DMain = ref(null);
    onMounted(() => {

      // 控制立方体的位置
      /**
       * 创建场景对象Scene
       */
      var scene = new THREE.Scene();
      const gui = new GUI();
      // 添加世界坐标辅助器
      var axesHelper = new THREE.AxesHelper(20);
      scene.add(axesHelper);


      // 实例化加载器

      const dracoLoader = new DRACOLoader()
      const gltfLoader = new GLTFLoader()

      // 设置draco路径

      dracoLoader.setDecoderPath(link + '/draco/');
      // 设置gltf加载器draco解码器
      gltfLoader.setDRACOLoader(dracoLoader);

      gltfLoader.load(link+'/glb/city.glb', (gltf) => {
        console.log(gltf)
        scene.add(gltf.scene)
      })

      /**
       * 光源设置
       */
          // 点光源
      var point = new THREE.PointLight(0xffffff);
      point.position.set(100, 100, 100); //点光源位置
      scene.add(point); //点光源添加到场景中
      //环境光
      var ambient = new THREE.AmbientLight(0x888888);
      scene.add(ambient);
      /**
       * 透视投影相机设置
       */
      var width = map3DMain.value.clientWidth; //窗口宽度
      var height = map3DMain.value.clientHeight; //窗口高度
      /**透视投影相机对象*/
      var camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000);
      // camera.position.set(3, 3, 3); //设置相机位置
      camera.position.set(-40, 40, 830); //设置相机位置
      camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
      /**
       * 创建渲染器对象
       */
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(width, height); //设置渲染区域尺寸
      renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
      map3DMain.value.appendChild(renderer.domElement);

      //创建控件对象  相机对象camera作为参数   控件可以监听鼠标的变化，改变相机对象的属性
      var controls = new OrbitControls(camera, renderer.domElement);

      controls.enableDamping = true; //开启阻尼效果
      // 设置阻尼系数
      controls.dampingFactor = 0.05

      // 自动旋转

      // controls.autoRotate = true; //是否开启自动旋转

      function render() {
        renderer.render(scene, camera); //执行渲染操作
        controls.update();
        requestAnimationFrame(render);
      }

      render();
      window.addEventListener('resize', () => {
        // 重置相机宽高比
        camera.aspect = map3DMain.value.clientWidth / map3DMain.value.clientHeight
        // 更新相机矩阵
        camera.updateProjectionMatrix();
        // 重置渲染器宽高比
        renderer.setSize(map3DMain.value.clientWidth, map3DMain.value.clientHeight);
      });
    });
    return {map3DMain};
  },
};
</script>


<style lang="scss" scoped>
.map3D {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  height: 100%;

  .map3DMain {
    position: relative;
    width: 100%;
    height: 100%;
  }
}

.fullscreen {
  position: fixed;
  right: 20px;
  top: 20px;
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 10px;
  color: #fff;
  z-index: 10000;
  background: #064040;

  &:hover {
    color: #fff;
  }
}
</style>
